<template>
    <div id="app">
      <form-create v-model="formData" v-model:api="formApi" :rule="formRules" @submit="handleSubmit" />
  
      <!-- 显示接口返回的消息的模态框 -->
      <div v-if="showModal" class="modal-overlay" @click="hideModal">
        <div class="modal-content" @click.stop>
          <h2 class="modal-title">接口返回消息</h2>
          <div class="modal-body">
            <pre><strong>Status Code:</strong> {{ statusCode }}</pre>
            <pre><strong>Response Data:</strong> {{ responseData }}</pre>
            <pre><strong>Error Message:</strong> {{ errorMessage }}</pre>
            <pre><strong>提示信息:</strong> {{ "请在300验证数据" }}</pre>
          </div>
          <button class="modal-close" @click="hideModal">关闭</button>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import axios from 'axios'; // 引入 axios 库
  
  // 表单数据
  const formData = ref({});
  // 表单 API 实例
  const formApi = ref(null);
  // 控制模态框的显示
  const showModal = ref(false);
  // 接口返回的消息
  const responseData = ref('');
  const statusCode = ref('');
  const errorMessage = ref('');
  
  // 表单规则
  const formRules = ref([
  {
    "type": "input",
    "field": "LIFNR",
    "title": "供应商",
    "info": "",
    "$required": false,
    "_fc_id": "id_Fvacm0kswpbdb8c",
    "name": "ref_F66fm0kswpbdb9c",
    "display": true,
    "hidden": false,
    "_fc_drag_tag": "input"
  },
  {
    "type": "input",
    "field": "BU_GROUP",
    "title": "分组",
    "info": "",
    "$required": false,
    "_fc_id": "id_Fx0nm0ksxbyabbc",
    "name": "ref_F66fm0kswpbdb9c",
    "display": true,
    "hidden": false,
    "_fc_drag_tag": "input"
  },
  {
    "type": "input",
    "field": "BU_SORT1",
    "title": "搜索项1",
    "info": "",
    "$required": false,
    "_fc_id": "id_Fg2em0ksxm86bdc",
    "name": "ref_F66fm0kswpbdb9c",
    "display": true,
    "hidden": false,
    "_fc_drag_tag": "input"
  },
  {
    "type": "input",
    "field": "BU_SORT2",
    "title": "搜索项2",
    "info": "",
    "$required": false,
    "_fc_id": "id_Fktxm0ksxzi7bfc",
    "name": "ref_F66fm0kswpbdb9c",
    "display": true,
    "hidden": false,
    "_fc_drag_tag": "input"
  },
  {
    "type": "input",
    "field": "NAME_ORG1",
    "title": "公司名称1",
    "info": "",
    "$required": false,
    "_fc_id": "id_Fwgmm0ksy78dbhc",
    "name": "ref_F66fm0kswpbdb9c",
    "display": true,
    "hidden": false,
    "_fc_drag_tag": "input"
  },
  {
    "type": "input",
    "field": "NAME_ORG2",
    "title": "公司名称2",
    "info": "",
    "$required": false,
    "_fc_id": "id_Ficcm0ksym2ebjc",
    "name": "ref_F66fm0kswpbdb9c",
    "display": true,
    "hidden": false,
    "_fc_drag_tag": "input"
  },
  {
    "type": "input",
    "field": "NAME_ORG3",
    "title": "公司名称3",
    "info": "",
    "$required": false,
    "_fc_id": "id_Fluhm0ksysq6blc",
    "name": "ref_F66fm0kswpbdb9c",
    "display": true,
    "hidden": false,
    "_fc_drag_tag": "input"
  },
  {
    "type": "input",
    "field": "NAME_ORG4",
    "title": "公司名称4",
    "info": "",
    "$required": false,
    "_fc_id": "id_Fo8am0ksyzwubnc",
    "name": "ref_F66fm0kswpbdb9c",
    "display": true,
    "hidden": false,
    "_fc_drag_tag": "input"
  },
  {
    "type": "input",
    "field": "VENDOR_CLASS",
    "title": "供应商分类",
    "info": "",
    "$required": false,
    "_fc_id": "id_Fw2dm0kszgcdbpc",
    "name": "ref_F66fm0kswpbdb9c",
    "display": true,
    "hidden": false,
    "_fc_drag_tag": "input"
  },
  {
    "type": "input",
    "field": "LEGAL_PERSON",
    "title": "供应商负责人",
    "info": "",
    "$required": false,
    "_fc_id": "id_F8f1m0kszpmubrc",
    "name": "ref_F66fm0kswpbdb9c",
    "display": true,
    "hidden": false,
    "_fc_drag_tag": "input"
  },
  {
    "type": "input",
    "field": "TAXTYPE",
    "title": "税号类别",
    "info": "",
    "$required": false,
    "_fc_id": "id_Fhn7m0kt00i6btc",
    "name": "ref_F66fm0kswpbdb9c",
    "display": true,
    "hidden": false,
    "_fc_drag_tag": "input"
  },
  {
    "type": "input",
    "field": "TAXNUMBER",
    "title": "统一信用代码",
    "info": "",
    "$required": false,
    "_fc_id": "id_Fsxwm0kt0eeibvc",
    "name": "ref_F66fm0kswpbdb9c",
    "display": true,
    "hidden": false,
    "_fc_drag_tag": "input"
  },
  {
    "type": "input",
    "field": "STREET",
    "title": "地址",
    "info": "",
    "$required": false,
    "_fc_id": "id_F7sjm0m6v27kbkc",
    "name": "ref_F66fm0kswpbdb9c",
    "display": true,
    "hidden": false,
    "_fc_drag_tag": "input"
  },
  {
    "type": "input",
    "field": "HOUSE_NUM1",
    "title": "门牌号",
    "info": "",
    "$required": false,
    "_fc_id": "id_Fpmym0kt0shhbxc",
    "name": "ref_F66fm0kswpbdb9c",
    "display": true,
    "hidden": false,
    "_fc_drag_tag": "input"
  },
  {
    "type": "input",
    "field": "POSTL_COD1",
    "title": "邮政编码",
    "info": "",
    "$required": false,
    "_fc_id": "id_Ft9um0kt1846bzc",
    "name": "ref_F66fm0kswpbdb9c",
    "display": true,
    "hidden": false,
    "_fc_drag_tag": "input"
  },
  {
    "type": "input",
    "field": "COUNTRY",
    "title": "国家代码",
    "info": "",
    "$required": false,
    "_fc_id": "id_Fe16m0kt1m6uc1c",
    "name": "ref_F66fm0kswpbdb9c",
    "display": true,
    "hidden": false,
    "_fc_drag_tag": "input"
  },
  {
    "type": "input",
    "field": "CITY",
    "title": "城市",
    "info": "",
    "$required": false,
    "_fc_id": "id_Fw2sm0kt1zitc3c",
    "name": "ref_F66fm0kswpbdb9c",
    "display": true,
    "hidden": false,
    "_fc_drag_tag": "input"
  },
  {
    "type": "input",
    "field": "REGION",
    "title": "城市代码",
    "info": "",
    "$required": false,
    "_fc_id": "id_F4ogm0kt255ic5c",
    "name": "ref_F66fm0kswpbdb9c",
    "display": true,
    "hidden": false,
    "_fc_drag_tag": "input"
  },
  {
    "type": "input",
    "field": "LANGU",
    "title": "语言代码",
    "info": "中文：1；英文：2",
    "$required": false,
    "_fc_id": "id_Fzjjm0kt4l3acac",
    "name": "ref_F66fm0kswpbdb9c",
    "display": true,
    "hidden": false,
    "_fc_drag_tag": "input"
  },
  {
    "type": "input",
    "field": "TELEPHONE",
    "title": "电话",
    "info": "",
    "$required": false,
    "_fc_id": "id_Fon9m0kt66pxcec",
    "name": "ref_F66fm0kswpbdb9c",
    "display": true,
    "hidden": false,
    "_fc_drag_tag": "input"
  },
  {
    "type": "input",
    "field": "EMAIL",
    "title": "邮箱",
    "info": "",
    "$required": false,
    "_fc_id": "id_Fkfcm0kt59h4ccc",
    "name": "ref_F66fm0kswpbdb9c",
    "display": true,
    "hidden": false,
    "_fc_drag_tag": "input"
  },
  {
    "type": "group",
    "field": "BUKRS_DATA",
    "title": "公司信息",
    "info": "",
    "$required": false,
    "props": {
      "rule": [
        {
          "type": "input",
          "field": "BUKRS",
          "title": "公司代码",
          "info": "",
          "$required": false,
          "_fc_id": "id_Fgh4m0kt7g5jcjc",
          "name": "ref_Fnc6m0kt7g5jckc",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        },
        {
          "type": "input",
          "field": "AKONT",
          "title": "总账科目",
          "info": "",
          "$required": false,
          "_fc_id": "id_Fpfwm0kt8290cmc",
          "name": "ref_Fnc6m0kt7g5jckc",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        },
        {
          "type": "input",
          "field": "ZTERM",
          "title": "付款条款",
          "info": "",
          "$required": false,
          "_fc_id": "id_Fzihm0kt8cfxcoc",
          "name": "ref_Fnc6m0kt7g5jckc",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        },
        {
          "type": "input",
          "field": "ZWELS",
          "title": "付款方式",
          "info": "",
          "$required": false,
          "_fc_id": "id_F2svm0kt8mt9cqc",
          "name": "ref_Fnc6m0kt7g5jckc",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        },
        {
          "type": "switch",
          "field": "SPERR",
          "title": "是否冻结",
          "info": "",
          "$required": false,
          "_fc_id": "id_F5s9m0kt9kavcuc",
          "name": "ref_F88am0kt9kavcvc",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "switch",
          "props": {
            "activeValue": "X",
            "inactiveValue": " "
          }
        }
      ]
    },
    "_fc_id": "id_Fbs3m0kt75vpcgc",
    "name": "ref_Fuwtm0kt75vpchc",
    "display": true,
    "hidden": false,
    "_fc_drag_tag": "group"
  },
  {
    "type": "group",
    "field": "EKORG_DATA",
    "title": "采购数据",
    "info": "",
    "$required": false,
    "props": {
      "rule": [
        {
          "type": "input",
          "field": "EKORG",
          "title": "采购组织",
          "info": "",
          "$required": false,
          "_fc_id": "id_Fzaum0ktaljad0c",
          "name": "ref_Fuxem0ktaljad1c",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        },
        {
          "type": "input",
          "field": "WAERS",
          "title": "货币",
          "info": "",
          "$required": false,
          "_fc_id": "id_F02jm0ktauzwd3c",
          "name": "ref_Fuxem0ktaljad1c",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        },
        {
          "type": "input",
          "field": "VERKF",
          "title": "销售人员",
          "info": "",
          "$required": false,
          "_fc_id": "id_Fnvkm0ktb8bod5c",
          "name": "ref_Fuxem0ktaljad1c",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        },
        {
          "type": "input",
          "field": "TELF1",
          "title": "联系电话",
          "info": "",
          "$required": false,
          "_fc_id": "id_F8xdm0ktbz71d7c",
          "name": "ref_Fuxem0ktaljad1c",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        },
        {
          "type": "input",
          "field": "EIKTO",
          "title": "税率",
          "info": "",
          "$required": false,
          "_fc_id": "id_F9j3m0ktcb6cd9c",
          "name": "ref_Fuxem0ktaljad1c",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        },
        {
          "type": "switch",
          "field": "SPERM",
          "title": "是否冻结",
          "info": "",
          "$required": false,
          "_fc_id": "id_Fzr0m0ktcy3uddc",
          "name": "ref_F31am0ktcy3udec",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "switch",
          "props": {
            "activeValue": "X",
            "inactiveValue": " "
          }
        }
      ]
    },
    "_fc_id": "id_F8i4m0kta69vcxc",
    "name": "ref_Fxvsm0kta69vcyc",
    "display": true,
    "hidden": false,
    "_fc_drag_tag": "group"
  }
]);
  
  // 隐藏模态框的函数
  const hideModal = () => {
    showModal.value = false;
  };
  
  // 提交表单的函数
  const handleSubmit = async (data) => {
    console.log('提交的数据:', JSON.stringify(data, null, 2));
    try {
      const username = 'IT10';
      const password = '654321';
      const encodedCredentials = btoa(`${username}:${password}`);
      const response = await axios.post('/zjcpt/ZFM_JICAI_08B?sap-client=700', data, {
        headers: {
          'Content-Type': 'application/json',
          'Authorization': 'Basic ' + encodedCredentials
        }
      });
  
      // 调试信息
      console.log('接口返回完整响应:', response);
  
      // 处理接口的响应
      responseData.value = JSON.stringify(response.data, null, 2);
      statusCode.value = response.status;
      errorMessage.value = '';
      showModal.value = true; // 显示模态框
    } catch (error) {
      // 调试信息
      console.error('提交失败:', error);
  
      // 处理错误情况
      if (error.response) {
        console.log('错误响应:', error.response);
        responseData.value = JSON.stringify(error.response.data, null, 2);
        statusCode.value = error.response.status;
        errorMessage.value = error.response.data.message || '提交失败，请重试。';
      } else {
        responseData.value = '';
        statusCode.value = '';
        errorMessage.value = '提交失败，请重试。';
      }
      showModal.value = true; // 显示模态框
    }
  };
  </script>
  
  <style scoped>
  /* 样式可根据需要调整 */
  .response-message {
    margin-top: 20px;
    color: #409eff;
  }
  
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }
  
  .modal-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    max-width: 80%;
    width: 600px; /* 适应屏幕宽度 */
    max-height: 80%; /* 适应屏幕高度 */
    overflow: auto; /* 添加滚动条 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: relative;
  }
  
  .modal-title {
    margin: 0;
    font-size: 1.5em;
    color: #333;
  }
  
  .modal-body {
    margin-top: 10px;
    color: #333;
    overflow-y: auto; /* 内部滚动条 */
  }
  
  .modal-body pre {
    white-space: pre-wrap; /* 保持换行 */
    word-break: break-word; /* 自动换行 */
    background: #f9f9f9;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: auto;
  }
  
  .modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #ff4d4d;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 1em;
  }
  
  .modal-close:hover {
    background: #e60000;
  }
  </style>
  